<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <style>
          .userp_1{
            position: relative;
        }
        .userp_2{
            position:absolute;
            right:20px;
            top:8px;
            font-weight: bold;
        }
        .layui-table-tool{
            padding-bottom: 0px!important;
        }
        .layui-table-tool-temp .layui-form{
            margin-top: 0px!important;
        }
        .layui-table-tool-temp .layui-form .layui-form-item{
            margin-bottom: 0px!important;
        }

        
    </style>
</head>

<body class="pear-container">
    
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="tableId" lay-filter="user-table"></table>
        </div>
    </div>
    <script type="text/html" id="user-toolbar">
        <form class="layui-form" action="" id="formSearchId">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="umsg"  placeholder="用户信息" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
            </div>
        </form>
    </script>

    <script type="text/html" id="user-usermsg">
        <img src="{{d.head_img}}" class="layui-nav-img">
        <span>{{d.nickname}}
        </span>
        {{#if (d.mobile ) { }}
            <span>| {{d.mobile}}</span>
        {{# } }}
    </script>

    <script type="text/html" id="user-yprice">
        <span>{{d.yprice}}</span>
    </script>
    <script type="text/html" id="user-set">
        <button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="showtUser">查看邀请</button>

    </script>
   

   
    <script src="/static/user/js/jquery.min.js"></script>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery','common'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
                let cols = [
                    [{
                        title: 'ID',
                        field: 'id',
                        align: 'left',
                        width: 50
                    },
                    {
                            title: '邀请用户',
                            field: 'nickname',
                            align: 'left',
                            templet: '#user-usermsg',
                            
                        },
                        {
                            title: '发展用户数',
                            field: 'count',
                            align: 'center',
                            width: 200,
                        },  
                    {
                        title: '注册时间',
                        field: 'addtime',
                        align: 'center',
                        width: 150,
                    }
                    
                     
                    ]
                    
                ];
                '{if $Request.get.t}'
                  cols[0].push({
                    title: '操作',
                        templet: '#user-set',
                        align: 'center',
                        width: 150,
                  });
                '{/if}'
                console.log(cols);
                table.render({
                    elem: '#tableId',
                    url: "{:url('user/showyuser')}?id={$Request.get.id}",
                    page: true,
                    cols: cols,
                    skin: 'line',
                    toolbar: '#user-toolbar',
                    defaultToolbar: [{
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }]
                });
                table.on('toolbar(user-table)', function (obj) {
                    if (obj.event === 'refresh') {
					    window.refresh();
                    }
                });
                window.refresh = function(param) {
					table.reload('tableId');
				}
               
                table.on('tool(user-table)', function (obj) {
                    if(obj.event ==='showtUser'){
                        window.showtUser(obj.data);
                    }
                
                });
                     // 显示邀请的用户列表
                     window.showtUser = function (data) {
                        top.layer.open({
                        type: 2,
                        title: `用户(${data.nickname})，共计邀请 （${data.count}人）`,
                        shade: 0.1,
                        area: ['800px', '700px'],
                        content: `{:url('user/showyuser')}?id=${data.id}&t=1`
                    });
                }
                
                
                form.on('submit(user-query)', function (data) {
                    _query_log=data.field;
                    table.reload('tableId', {
                        page: {curr: 1 },
                        where: data.field
                    })
                    $("#formSearchId").find("input[name='umsg']").val(_query_log.umsg);  
                    return false;
                });

			})
            _query_log={
                    umsg:''
                };
    </script>
    {include file="base/unitjs"}
</body>

</html>